import Stats from '../../libs/Stats/Stats.js' //引入左上角统计
import * as dat from 'dat.gui' //引入右上角控制速度
import {
	Scene,
	PerspectiveCamera,
	WebGLRenderer,
	AxesHelper,
	Mesh,
	BoxGeometry,
	MeshLambertMaterial,
	PlaneGeometry,
	SpotLight,
	Vector2,
	AmbientLight,
	Fog,
	FogExp2
} from 'three'; //引入threejs

var scene = new Scene(); //创建场景
// scene.fog = new Fog(0x0000ff,0.03,100)//添加雾化效果1
// scene.fog = new FogExp2(0x0000ff, 0.02)//添加雾化效果2
// scene.overrideMaterial = new MeshLambertMaterial({color:0x0000ff})//添加覆盖蓝色



//创建透视摄像机：基于摄像机的角度来计算创景对象在浏览器中是什么样子
var camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new WebGLRenderer(); //创建渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //设置渲染器的大小
renderer.shadowMap.enabled = true; //显示阴影
document.getElementById('puidu-webgl-output').appendChild(renderer.domElement)


var axes = new AxesHelper(50); //添加三维坐标轴
scene.add(axes); //将三维坐标轴添加到场景中


var gemotry = new BoxGeometry(8, 8, 8); //创建立方几何体。参数为长 宽 高
var meterial = new MeshLambertMaterial({
	color: 0xff0000
}); //创建网格lamert材质，并设置颜色
var cube = new Mesh(gemotry, meterial); //创建新的网格对象
cube.castShadow = true; //显示阴影
cube.position.x = 4;
cube.position.y = 10;
cube.position.z = 20;
scene.add(cube); //把立方体网格添加到场景中

var gemotry2 = new BoxGeometry(4, 4, 4);
var meterial2 = new MeshLambertMaterial({
	color: 0x00ff00
});
var cube2 = new Mesh(gemotry2, meterial2);
cube2.castShadow = true;
cube2.position.x = 0;
cube2.position.y = 20;
cube2.position.z = 0;
cube2.name = "cube2";
scene.add(cube2);

var findObj = scene.getObjectByName('cube2');
console.log(findObj.position)



var planeGeometry = new PlaneGeometry(100, 100); //新建平面几何体
var planeMeterial = new MeshLambertMaterial({
	color: 0xcccccc
}); //新建lamert材质，可以接收并反射场景中各种光源发射出来的光线。基础材质不可以。
var plane = new Mesh(planeGeometry, planeMeterial) //新建地面网格对象

plane.rotation.x = -0.5 * Math.PI; //将地面网格沿着x轴往里旋转90度
plane.position.set(15, 0, 0); //设置地面网格，X轴往右15个单位，Y轴、Z轴保持初始值
plane.receiveShadow = true;
scene.add(plane); //将地面网格对象添加到场景中


camera.position.x = -30; //红色。x轴向右代表正数，向左代表负数。
camera.position.y = 45 //绿色。y轴向上代表正数，向下代表负数
//设置透视摄像机在Z轴上的距离，也就是它和我们屏幕的垂直距离。
camera.position.z = 35; // 蓝色。z轴靠近我们的代表正数，远离我们的代表负数
camera.lookAt(scene.position);

var spotLight = new SpotLight(0xffffff); //创建聚光灯光源对象
spotLight.position.set(-60, 40, -65); //设置聚光灯在左上角
spotLight.castShadow = true; //让聚光灯产生阴影
spotLight.shadow.mapSize = new Vector2(1024, 1024); //设置阴影的效果
spotLight.shadow.camera.far = 180;
spotLight.shadow.camera.near = 40;
scene.add(spotLight); //将聚光灯添加到场景中

var ambienLight = new AmbientLight(0xAAAAAA); //创建ambient 光源
scene.add(ambienLight); //将光源添加到场景中


// cube.rotation.x += 0.5; //立方体沿着x轴旋转角度 
// cube.rotation.y += 0 .5; //立方体沿着y轴旋转角度 
// renderer.renderer(scene, camera); // 将场景和摄像机两个对象传入渲染器中

var ctrlObj = {
	rotationSpeed: 0.01,
	jumpSpeed: 0.01
};
var ctrl = new dat.GUI();
ctrl.add(ctrlObj, "rotationSpeed", 0, 1); //设置旋转速度范围0到1
ctrl.add(ctrlObj, "jumpSpeed", 0, 1); //设置跳跃速度范围0到1


var stats = addStats();


var ctrlObj2 = new function() {
	// 删除场景中的对象
	this.removeFindCube = function() {
		if (findObj instanceof Mesh) {
			//instanceof 用于判断左侧对象是否是右侧构造函数的实例化对象
			scene.remove(findObj)
		}
	}

	this.addNewCube = function() {
		// 添加场景对象
		var geometryTemp = new BoxGeometry(4, 4, 4) //创建立方体
		var magerialTemp = new MeshLambertMaterial({
			color: 0x0000ff
		})
		var cubeTemp = new Mesh(geometryTemp, magerialTemp)
		cubeTemp.castShadow = true
		cubeTemp.position.x = Math.random() * 10
		cubeTemp.position.y = Math.random() * 10
		cubeTemp.position.z = Math.random() * 10
		scene.add(cubeTemp)
	}
}
var ctrl2 = new dat.GUI();
ctrl2.add(ctrlObj2, 'removeFindCube');
ctrl2.add(ctrlObj2, 'addNewCube')


renderScence();
var gap = 0;

function renderScence() {
	// 封装刷新页面的方法

	// cube.rotation.x += 0.01; //立方体沿着x轴旋转速度为0.01
	// cube.rotation.y += 0.01; //立方体沿着y轴旋转速度为0.01
	// cube.rotation.z += 0.01; //立方体沿着y轴旋转速度为0.01
	cube.rotation.x += ctrlObj.rotationSpeed;
	cube.rotation.y += ctrlObj.rotationSpeed;
	cube.rotation.z += ctrlObj.rotationSpeed;

	cube2.rotation.x += 0.01; //立方体沿着x轴旋转速度为0.01
	cube2.rotation.y += 0.01; //立方体沿着y轴旋转速度为0.01
	cube2.rotation.z += 0.01; //立方体沿着y轴旋转速度为0.01

	// gap += 0.01;
	gap += ctrlObj.jumpSpeed;

	cube.position.x = 25 + (20 * (Math.sin(gap))); //实现立方体的跳跃效果
	cube.position.y = 6 + (20 * Math.abs(Math.cos(gap)));

	stats.update();
	requestAnimationFrame(renderScence); // requestAnimationFrame使浏览器进行平滑高效的进行绘制
	renderer.render(scene, camera);
}

function addStats() {
	// 封装统计对象。用来检测画面每秒传输帧数。

	var stats = new Stats();
	//初始化统计对象的位置
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.top = '0px';
	stats.setMode(0);
	document.getElementById('myStats').appendChild(stats.domElement);
	return stats;
}
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
	// 改变屏幕尺寸，画布自适应屏幕
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
}
